/**
 * @Title: index.js
 * @Description: index
 * @author: Fanchao
 * @date: 2020/9/20 6:05 下午
 * @version V1.0
 */
import React, { useRef, useState } from 'react';

import { Input, Form, Button, Row, Col, Card, Select, TimePicker, message } from 'antd';
import UploadImg from 'components/UploadImg';
import moment from 'moment';
import { history } from 'umi';
import { connect } from 'umi';
import SelectAddress from '@/pages/shop-manage/shop/components/select-address';

const format = 'HH:mm';
const formItemLayout = {
    labelCol: { span: 5 }, // 左侧label宽度
    wrapperCol: { span: 16 }, // 右侧输入框等的宽度
};
const tailLayout = {
    wrapperCol: { offset: 5, span: 16 },
};
const { Item } = Form;
const { Option } = Select;
const { RangePicker } = TimePicker;
const EditShop = ({ ShopEditDetail: { shopDetail, pcategoryOption, shop_sign, business_license_image, catering_service_license_image, brand_sale_protocol_image }, dispatch, loading }) => {
    const [form] = Form.useForm();
    form.setFieldsValue({
        name: shopDetail.name,
        leader: shopDetail.leader,
        phone: shopDetail.phone,
        category: { key: shopDetail.category_id, label: shopDetail.category_name },
        description: shopDetail.description,
        brand_name: shopDetail.brand_name,
        promotion_info: shopDetail.promotion_info,
        opening_hours: [moment(shopDetail.start_time, format), moment(shopDetail.end_time, format)],
        // addressOption: shopDetail.address,
    });
    const [selectAddressShow, setSelectAddressShow] = useState(false);
    const [addressConfig, setAddressConfig] = useState({
        name: shopDetail.address,
        address: shopDetail.address,
        longitude: shopDetail.longitude,
        latitude: shopDetail.latitude,
    });

    const imgRefShopSign = useRef();
    const imgRefBusiness = useRef();
    const imgRefCatering = useRef();
    const imgRefBrand = useRef();


    const submit = () => {
        const shop_sign = imgRefShopSign.current.cbImgRef();
        const business_license_image = imgRefBusiness.current.cbImgRef();
        const catering_service_license_image = imgRefCatering.current.cbImgRef();
        const brand_sale_protocol_image = imgRefBrand.current.cbImgRef();

        if (shop_sign.length === 0) {
            message.warn('请上传店铺招牌');
            return;
        }
        if (business_license_image.length === 0) {
            message.warn('请上传经营许可证');
            return;
        }
        if (catering_service_license_image.length === 0) {
            message.warn('请上传食品服务许可证');
            return;
        }
        if (brand_sale_protocol_image.length === 0) {
            message.warn('请上传品牌销售协议');
            return;
        }


        form.validateFields().then(async values => {
            values.id = shopDetail.id;
            values.category_id = values.category.key;
            values.category_name = values.category.label;
            values.shop_sign = shop_sign[0].url;
            values.business_license_image = business_license_image[0].url;
            values.catering_service_license_image = catering_service_license_image[0].url;
            values.brand_sale_protocol_image = brand_sale_protocol_image[0].url;
            values.start_time = moment(values.opening_hours[0]).format('HH:mm:ss');
            values.end_time = moment(values.opening_hours[1]).format('HH:mm:ss');

            values.address = addressConfig.address;
            values.latitude = addressConfig.latitude;
            values.longitude = addressConfig.longitude;

            delete values.opening_hours;
            delete values.addressOption;
            delete values.category;
            dispatch({
                type: 'ShopEditDetail/updateShop',
                payload: values,
                callback: (res) => {
                    history.push('/shop-manage/shop/list');
                },
            });
        }).catch(info => {
        });
    };
    if (loading) return null;
    return (
        <Card>
            <Form
                form={form}
                {...formItemLayout}
                initialValues={{
                    addressOption: shopDetail.address,
                }}
            >
                <Row>
                    <Col span={8}>
                        <Item
                            label="店铺名称"
                            name="name"
                            rules={[{ required: true, message: '必填' }]}
                        >
                            <Input placeholder="请输入店铺名"/>
                        </Item>
                    </Col>
                    <Col span={8}>
                        <Item
                            label="店铺负责人"
                            name="leader"
                            rules={[{ required: true, message: '必填' }]}
                        >
                            <Input placeholder="请输入店铺负责人"/>
                        </Item>
                    </Col>
                    <Col span={8}>
                        <Item
                            label="联系方式"
                            name="phone"
                            rules={[{ required: true, message: '必填' }]}
                        >
                            <Input placeholder="请输入联系方式"/>
                        </Item>
                    </Col>
                    <Col span={8}>
                        <Item
                            label="店铺地址"
                            name="addressOption"
                            rules={[{ required: true, message: '必填' }]}
                        >
                            <Input readOnly onClick={() => setSelectAddressShow(true)} placeholder="请选择店铺地址"/>
                        </Item>
                    </Col>
                    <Col span={8}>
                        <Item
                            label="店铺分类"
                            name="category"
                            rules={[{ required: true, message: '必填' }]}
                        >
                            <Select
                                placeholder="请选择店铺分类"
                                labelInValue
                            >
                                {
                                    pcategoryOption.map(item => {
                                        return <Option key={item._id} value={item._id}>{item.name}</Option>;
                                    })
                                }

                            </Select>
                        </Item>
                    </Col>
                    <Col span={8}>
                        <Item
                            label="营业时间"
                            name="opening_hours"
                            rules={[{ required: true, message: '必填' }]}
                        >
                            <RangePicker
                                format={format}
                                style={{ width: '100%' }}
                            />
                        </Item>
                    </Col>
                    <Col span={8}>
                        <Item
                            label="店铺描述"
                            name="description"
                            rules={[{ required: true, message: '必填' }]}
                        >
                            <Input placeholder="请输入店铺名"/>
                        </Item>
                    </Col>
                    <Col span={8}>
                        <Item
                            label="品牌名称"
                            name="brand_name"
                            rules={[{ required: true, message: '必填' }]}
                        >
                            <Input placeholder="请输入店铺名"/>
                        </Item>
                    </Col>
                    <Col span={8}>
                        <Item
                            label="促销信息"
                            name="promotion_info"
                            rules={[{ required: true, message: '必填' }]}
                        >
                            <Input placeholder="请输入店铺名"/>
                        </Item>
                    </Col>
                </Row>
                <Row>
                    <Col span={8}>
                        <Item
                            label="店铺招牌"
                        >
                            <UploadImg
                                fileListDetail={shop_sign}
                                imgRef={imgRefShopSign}
                                max={1}
                                isCropper={true}
                            />
                        </Item>
                    </Col>
                    <Col span={8}>
                        <Item
                            label="经营许可证"
                        >
                            <UploadImg
                                fileListDetail={business_license_image}
                                imgRef={imgRefBusiness}
                                max={1}
                                isCropper={true}
                            />
                        </Item>
                    </Col>
                    <Col span={8}>
                        <Item
                            label="食品服务许可证"
                        >
                            <UploadImg
                                fileListDetail={catering_service_license_image}
                                imgRef={imgRefCatering}
                                max={1}
                                isCropper={true}
                            />
                        </Item>
                    </Col>
                    <Col span={8}>
                        <Item
                            label="品牌销售协议"
                        >
                            <UploadImg
                                fileListDetail={brand_sale_protocol_image}
                                imgRef={imgRefBrand}
                                max={1}
                                isCropper={true}
                            />
                        </Item>
                    </Col>
                </Row>
                <Row>
                    <Col span={8}>
                        <Item {...tailLayout}>
                            <Button type="primary" onClick={submit}>提交</Button>
                        </Item>
                    </Col>
                </Row>
            </Form>
            <SelectAddress
                addressConfig={addressConfig}
                selectAddressShow={selectAddressShow}
                cb={(res) => {
                    setAddressConfig(res.signAddrList);
                    form.setFieldsValue({
                        addressOption: res.signAddrList.address,
                    });
                    setSelectAddressShow(res.show);
                }}
            />
        </Card>
    );
};


export default connect(({ ShopEditDetail, dispatch, loading }) => ({
    ShopEditDetail,
    dispatch,
    loading: loading.effects['ShopEditDetail/getShopDetail'],
}))(EditShop);
